<template>
  <div class="menuCls">
    <el-card>
      <el-button
        style="margin-bottom: 20px;"
        @click="addMenuFnc">
        添加菜单</el-button>
      <table-base :tableData="tableData">
        <template>
          <el-table-column
            prop="id"
            label="编号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="菜单名称">
          </el-table-column>
          <el-table-column
            label="菜单级数">
            <template>
              <div>{{currentTxt}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="icon"
            label="前端图标">
          </el-table-column>
          <el-table-column
            prop="createdTime"
            label="排序">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            align="center">
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="editFnc(row)">
                编辑</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteFnc(row)">
                删除</el-button>
            </template>
          </el-table-column>
        </template>
      </table-base>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="serverData.current"
        :page-sizes="[1, 3, 5, 7, 9]"
        :page-size="serverData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="serverData.total"
        :disabled="$store.state.isShowLoading"
        style="margin-top:20px">
      </el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts">
import { getMenuPages } from '@/api/menu'
import type { IMenuPagesReturn, IMenuRecords } from '@/api/types'
import Vue from 'vue'
export default Vue.extend({
  name: 'menuPage',
  data () {
    return {
      tableData: [] as [] | IMenuRecords[],
      gradeLv: ['一级', '二级', '三级'],
      textLv: '',
      serverData: {
        current: 1,
        size: 3
      } as IMenuPagesReturn
    }
  },
  methods: {
    editFnc (row:any) {
      this.$router.push({
        name: 'addMenu',
        query: row.id
      })
    },
    deleteFnc (row:any) {
      console.log(row)
    },
    addMenuFnc () {
      this.$router.push('/addMenu')
    },
    async getMenuInfo () {
      const data = await getMenuPages(this.serverData)
      console.log(data)
      this.tableData = data.records
      this.serverData = data
      for (const item of this.tableData) {
        this.currentTxt = item.level
      }
    },
    handleSizeChange (val:number) {
      console.log(val)

      this.serverData.size = val
      this.serverData.current = 1
      this.getMenuInfo()
    },
    handleCurrentChange (val:number) {
      this.serverData.current = val
      this.getMenuInfo()
    }
  },
  created () {
    this.getMenuInfo()
  },
  computed: {
    currentTxt: {
      get ():string {
        return this.textLv
      },
      set (lv:number) {
        this.textLv = this.gradeLv[lv]
      }
    }
  }
})
</script>

<style>

</style>
